.main-header {
  &.top-nav {
    .header-navbar {
      .sidebar-toggler {
        outline: none;
        color: rgba(255, 255, 255, .5);
        border-color: rgba(255, 255, 255, .1);

        .navbar-toggler-icon {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
      }
    }
  }

  .header-navbar {
    .sidebar-toggler {
      outline: none;
      color: rgba(0, 0, 0, .5);
      border-color: rgba(0, 0, 0, .2);

      .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
      }
    }
  }
}

@mixin dark-mode {
  .main-header {
    .header-navbar {
      .sidebar-toggler {
        outline: none;
        color: rgba(255, 255, 255, .5);
        border-color: rgba(255, 255, 255, .1);

        .navbar-toggler-icon {
          background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }
      }
    }
  }
}

@media (prefers-color-scheme: dark) {
  @include dark-mode;
}

[data-theme="dark"] {
  @include dark-mode;
}
